<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>empIndex</title>
    <script th:src="@{js/jquery-3.6.0.min.js}" type="application/javascript"></script>
    <script>
        $(function (){
            $("#btnEmp").click(function (){
                $.ajax({url:"/ajaxQueryEmp",
                    dataType:"json",
                    success:function(result){
                        let str="";
                        for (let i = 0; i < result.length; i++) {
                            console.log(result[i].empNo)
                            console.log(result[i].empName)
                            console.log(result[i].salary)
                            console.log(result[i].hireDate)
                            console.log(result[i].deptId)
                            str=str+"<tr>"
                                +"<td>"+result[i].empNo+"</td>"
                                +"<td>"+result[i].empName+"</td>"
                                +"<td>"+result[i].salary+"</td>"
                                +"<td>"+result[i].hireDate+"</td>"
                                +"<td>"+result[i].deptId+"</td>"
                                +"</tr>"
                        }
                        $("#empTable").html(str);
                    },
                    error:function (err){
                        alert(err);
                    }
                });
            })
        })

    </script>
</head>
<body>
<h1>部门首页</h1>
<a href="/gotoAddEmp">添加</a>
<form action="/queryEmp" method="post">
    <input name="empNo" type="text" placeholder="请输入员工编号">
    <input name="empName" type="text" placeholder="请输入员工名称">
    <input name="salary" type="text" placeholder="请输入员工薪资">
    <input name="hireDate" type="date" placeholder="请输入员工入职时间">
    <input name="deptId" type="text" placeholder="请输入部门编号">
    <input type="submit" value="查询">
</form>

<table border="1">
    <tr>
        <td>员工编号</td>
        <td>员工名称</td>
        <td>员工薪资</td>
        <td>入职日期</td>
        <td>部门编号</td>
        <td>操作</td>

    </tr>
    <tr th:each="emp,state:${list}"th:bgcolor="${state.index}%2==0?'yellow':'skybule'" >
        <td th:text="${emp.empNo}"></td>
        <td th:text="${emp.empName}"></td>
        <td th:text="${emp.salary}"></td>
        <td th:text="${#dates.format(emp.hireDate,'yyyy-MM-dd')}"></td>
        <td th:text="${emp.deptId}"></td>
        <td>
            <a th:href="@{/gotoEditEmp/}+${emp.empNo}">修改</a>
            <a th:href="@{/delEmp(empNo=${emp.empNo})}">删除</a>

        </td>

    </tr>
</table>

<button id="btnEmp" >获取数据</button>
<table border="1" id="empTable">

</table>

</body>
</html>